<template>
  <div class="chart_main">
    <div v-show="state.option.show" ref="pieChart"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps, reactive, computed, watch} from "vue";
import * as echarts from "echarts";
import {copyDefinedProperties} from "../../../../utils/copy.ts"
import {getColorFromLocal} from "../../../style/css.ts";
defineOptions({
  name: 'Pie'
})
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const pieChart=ref(null)
const state = reactive({
  option:{
    height:200,
    width:300,
    left:0,
    top:0,
    show:true,
  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
  initBarChart()
})
function setting(){
  if(props.option!==undefined){
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
let epiechart
let canvas
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  epiechart.resize(getChartSize())
})
function getChartSize(){
  return{
    width:(state.option.width/100)*state.window.width,
    height:(state.option.height/100)*state.window.height
  }
}
function initBarChart(){
  let data=[
    {value:50,name:"√"},
    {value:50,name:"×"},
  ]
  epiechart=echarts.init(pieChart.value,null,getChartSize())
  //修改样式(防止被挡)
  canvas=epiechart.getZr().dom
  canvas.style.zIndex=9999
  // canvas.style.position="absolute"
  // canvas.style.top=`${state.option.top}px`
  // canvas.style.left=`${state.option.left}px`
  SetOption(data)
}
function SetOption(data){
  if(epiechart!==undefined){
    epiechart.setOption({
      tooltip:{
      },
      series: [
        {
          center : ['50%', '50%'],    // 默认全局居中
          radius : [0, '55%'],
          type: 'pie',
          label: {
            fontSize: 15,
            color: '#235894'
          },
          labelLine: {
            lineStyle: {
              color: '#235894'
            }
          },
          itemStyle: {
            barBorderRadius: 5,
            borderWidth: 1,
            borderType: 'solid',
            borderColor: cmap.borderColor,
            shadowColor: cmap.shadowColor,
            shadowBlur: 3
          },
          data:data,
          color:cmap.color
        }
      ]
    });
  }
}
defineExpose({SetOption})
</script>

<style scoped>
.chart_main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
}
</style>
